<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>主界面</title>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
<script type="text/javascript" src="../static/js/commons.js"></script>
<script type="text/javascript" src="../static/js/webs.js"></script>
<body onload="xxx()">
<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-logo{
        width: 100px;
        height: 30px;
        background-image:url("../static/images/tourist.png");
        background-repeat: no-repeat;
        background-size: 30%,30%;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 15px;
        left: 20px;
    }
    .layout-nav{
        width: 500px;
        margin: 0 auto;
        margin-right: 20px;
    }
</style>

<div class="layout" id="app">
    <i-layout>
        <i-header>
            <i-menu mode="horizontal" theme="dark" active-name="1">
                <div class="layout-logo"></div>
                <div class="layout-nav">
                    <menu-item name="1">
                        <Icon type="ios-navigate"></Icon>
                        个人中心
                    </menu-item>
                    <menu-item name="2">
                        <Icon type="ios-keypad"></Icon>
                        咨询服务
                    </menu-item>
                    <menu-item name="3">
                        <Icon type="ios-analytics"></Icon>
                        开发区介绍
                    </menu-item>
                    <menu-item name="4">
                        <Icon type="ios-paper"></Icon>
                        <span v-on:click="exit()">退出系统</span>
                    </menu-item>
                </div>
            </i-menu>
        </i-header>
        <Layout>
            <Sider hide-trigger :style="{background: '#fff'}">
                <i-menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
                    <Submenu name="1">
                        <template slot="title">
                            <Icon type="ios-navigate"></Icon>
                            个人中心
                        </template>
                        <menu-item name="1-1">
                            <span v-on:click="info()">修改个人资料</span></menu-item>
                        <menu-item name="1-2"><span v-on:click="record()">查看咨询记录</span></menu-item>
                        <menu-item name="1-3"><span v-on:click="suggestionT()">提出您的建议</span></menu-item>
                    </Submenu>
                    <Submenu name="2">
                        <template slot="title">
                            <Icon type="ios-keypad"></Icon>
                            咨询服务
                        </template>
                        <menu-item name="2-1"><span v-on:click="self()">自助咨询</span></menu-item>
                        <menu-item name="2-2"><span v-on:click="consult()">人工服务</span></menu-item>
                    </Submenu>
                    <Submenu name="3">
                        <template slot="title">
                            <Icon type="ios-analytics"></Icon>
                            开发区介绍
                        </template>
                        <menu-item name="3-1">
                            <span onclick="getScenery()">景区介绍</span>
                        </menu-item>
                        <menu-item name="3-2">
                            <span onclick="getPrice()">价格报表</span>
                        </menu-item>
                    </Submenu>
                </i-menu>
            </Sider>
            <Layout :style="{padding: '0 24px 24px'}">
                <i-breadcrumb :style="{margin: '24px 0'}">
                    <breadcrumb-item>个人中心</breadcrumb-item>
                    <breadcrumb-item>咨询服务</breadcrumb-item>
                    <breadcrumb-item>开发区介绍</breadcrumb-item>
                </i-breadcrumb>
                <i-content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                    {{content}}
                    <div id="info" style="width: 600px">个人信息
                        <i-form v-ref:user-info :model="userInfo" :rules="ruleValidate" :label-width="80" style="margin-top: 25px">
                            <form-item label="姓名" prop="user_name">
                                <i-input :value.sync="userInfo.user_name" placeholder="请输入姓名"></i-input>
                            </form-item>
                            <form-item label="邮箱" prop="email">
                                <i-input :value.sync="userInfo.email" placeholder="请输入邮箱"></i-input>
                            </form-item>
                            <form-item label="电话" prop="phoneNumber">
                                <i-input :value.sync="userInfo.phoneNumber" placeholder="请输入..."></i-input>
                            </form-item>
                            <form-item>
                                <i-button type="primary" @click="handleSubmit(Main.userInfo)">提交</i-button>
                                <i-button type="ghost" @click="handleReset(Main.userInfo)" style="margin-left: 8px">重置</i-button>
                            </form-item>
                        </i-form>
                        <i-form v-ref:form-custom :model="formCustom" :label-width="80">
                            <form-item label="密码" prop="passwd">
                                <i-input type="password" :value.sync="formCustom.passwd"></i-input>
                            </form-item>
                            <form-item label="确认密码" prop="passwdCheck">
                                <i-input type="password" :value.sync="formCustom.passwdCheck"></i-input>
                            </form-item>
                            <form-item>
                                <i-button type="primary" @click="handleSubmit('formCustom')">提交</i-button>
                                <i-button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</i-button>
                            </form-item>
                        </i-form>
                    </div>
                    <div id="record">查询记录
                        <i-table :columns="consultsTable" :data="consultsData" style="margin-top: 25px"></i-table>
                    </div>
                    <div id="suggestion">提出建议
                        <div style="margin-top: 25px">
                            <i-input v-model="suggestion.title" placeholder="Enter title..." style="width: 300px" ></i-input>
                        </div>
                        <div style="margin-top: 30px">
                            <i-input v-model="suggestion.content" maxlength="150" show-word-limit type="textarea" placeholder="Enter something..." style="width: 300px;height: 70px" ></i-input>
                        </div>
                        <i-button type="success" long @click="sendSuggestion(Main.suggestion)" style="width: 300px">SUBMIT</i-button>
                    </div>
                    <div id="self" style="float: left">
                        <div id="condition" style="float: left">
                            自助服务
                            <Card style="width:350px;margin-top: 25px;margin-bottom: 25px">
                                <p slot="title">
                                    <Icon type="ios-film-outline"></Icon>
                                    点击率最高：
                                </p>
                                <ul>
                                    <li v-for="item in questionList" style="margin-left: 30px">
                                        <a v-on:click="searchByName(item.title)" target="_blank">{{ item.title }}</a>
                                    </li>
                                </ul>
                            </Card>

                            <p style="width: 500px">请选择一级分类：</p>
                            <i-select v-model="model1" style="width:200px;margin-top: 7px;margin-bottom: 20px" @on-change="getQuestionTitle">
                                <i-option v-for="item in classify" :value="item.title" :key="item.title" >
                                    {{ item.title }}
                                </i-option>
                            </i-select>
                            <p style="width: 500px">请选择二级分类：</p>
                            <i-select v-model="model2" style="width:200px;margin-top: 7px;margin-bottom: 20px" @on-change="setCondition">
                                <i-option v-for="item in classify2" :value="item.title" :key="item.title">{{ item.title }}</i-option>
                            </i-select>
                            <p style="width: 500px">请输入搜索条件：</p>
                            <i-input search="true" enter-button placeholder="Enter something..." style="width:250px;margin-top: 7px;margin-bottom: 20px" :value.sync="condition" @on-search="getAnswerByClassify"></i-input>
                            <p style="width: 500px">不知道具体分类？来试试全局搜索吧！</p>
                            <i-input search="true" enter-button placeholder="Enter something..." style="width:250px;margin-top: 7px;margin-bottom: 20px" :value.sync="key" @on-search="getAnswerByKey"></i-input>

                        </div>
                        <div style="width: 600px;float: left;display: none" id="answers" >
                        <p style="width: 500px;margin-bottom: 26px;margin-left: 30px">您要找的问题是不是 >>>>>></p>
                            <Collapse v-model="value2" style="width:500px;margin-top: 7px" accordion>
                                <Panel name="index" v-for="(item, index)  in answers">
                                    {{ item.title }}
                                    <p slot="content">
                                        {{ item.answer }}
                                    </p>
                                </Panel>
                            </Collapse>
                        </div>
                    </div>
                    <div id="consult">人工服务
                        <span>{{waiting}}</span>
                        <div style="margin-top: 25px">
                            <div style="margin-top: 25px">
                                <i-input v-model="boardText" maxlength="50" show-word-limit type="textarea"
                                         placeholder="Enter something..." style="width:300px"></i-input>
                                <i-button type="success" short @click="doSend(Main.boardText)">SUBMIT</i-button>
                            </div>
                        </div>

                        <div id="message" style="margin-top: 25px">

                        </div>
                    </div>
                </i-content>
            </Layout>
        </Layout>
        <i-footer>
            <div style="text-align: center">
                天津职业技术师范大学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;软件1701&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;宿嘉
            </div>
        </i-footer>
    </i-layout>
</div>

<script>
    var Main=new Vue({
        el:'#app',
        data:{
            formCustom: formCustom,
            userInfo: {
                user_id: '',
                user_account: '',
                user_name: '',
                user_pwd: '',
                email: '',
                phoneNumber: ''
            },
            ruleValidate: {
                user_name: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '邮箱不能为空', trigger: 'blur' },
                    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
                ],
                phoneNumber:[
                    { required: true, message: '电话不能为空', trigger: 'blur' },
                    { type: 'number', message: '电话格式不正确', trigger: 'blur' }
                ]
            },
            suggestion:{
                suggestion_id:'',
                title:'',
                content:'',
                user_account:'',
                state:0
            },
            waiting:'',
            consultsTable: consults,
            consultsData: [],
            value:'',
            value17:'',
            content:'',
            boardText:'',
            questionList: [],
            answers:[],
            classify: [],
            classify2:[],
            choose:'',
            model1: '',
            model2:'',
            value2: '1',
            key:'',
            condition:''
        },
    });
    function searchByName(e) {
        getAnswer(e);
        $('#answers').css('display','block');
        console.log(e);
    }
    function info(){
        Main.content='';
        //获取个人信息
        $('#info').css('display','block');
        $('#record').css('display','none');
        $('#suggestion').css('display','none');
        $('#consult').css('display','none');
        $('#manager').css('display','none');
        $('#self').css('display','none');
    }
    function record(){
        Main.content='';
        //获取全部的咨询记录
        getRecords();
        $('#info').css('display','none');
        $('#record').css('display','block');
        $('#suggestion').css('display','none');
        $('#consult').css('display','none');
        $('#manager').css('display','none');
        $('#self').css('display','none');

    }
    function suggestionT(){
        Main.content='';
        $('#info').css('display','none');
        $('#record').css('display','none');
        $('#suggestion').css('display','block');
        $('#consult').css('display','none');
        $('#manager').css('display','none');
        $('#self').css('display','none');

    }
    function consult() {
        Main.content='';
        Main.waiting='正在为您连线服务专员······';
        //ajax请求连接对应的员工
        $('#info').css('display','none');
        $('#record').css('display','none');
        $('#suggestion').css('display','none');
        $('#consult').css('display','block');
        $('#manager').css('display','none');
        $('#self').css('display','none');
        //打开websocket
        openConsult();
        Main.waiting='·连接成功·';

    }
    function self() {
        Main.content='';
        //自助咨询首先获取一级标题
        //获取点击率最高的问题
        getClassify();
        getMostClick();
        // getAnswer("商场1");
        $('#info').css('display','none');
        $('#record').css('display','none');
        $('#suggestion').css('display','none');
        $('#consult').css('display','none');
        $('#manager').css('display','none');
        $('#self').css('display','block');

    }
</script>
<style>
    .ivu-table .demo-table-info-cell-name {
        background-color: #2db7f5;
        color: #fff
    }
    .ivu-table .demo-table-info-cell-age {
        background-color: #ff6600;
        color: #fff;
    }
</style>
</body>
</html>